<template>
  <view class="read-agreement">
    <uv-checkbox-group :model-value="modelValue" @change="handleChange">
      <uv-checkbox :custom-style="{ marginBottom: '8px' }" name="agreement">
        <template #default>
          <view class="flex justify-center items-center"
            ><text class="text-#1A1A1A">我已阅读并同意</text><text class="text-#6294f1" @click.stop="openProtocol">《易盟用户注册协议》</text></view
          >
        </template>
      </uv-checkbox>
    </uv-checkbox-group>
    <mt-modal ref="mtModalRef">
      <view class="content flex-col">
        <view class="text-#1C213E text-48rpx fw-600 flex justify-center items-center">温馨提示</view>
        <view class="mb-32rpx mt-24rpx">
          <text class="text-#727687 text-28rpx fw-400">亲爱的用户，感谢您信任并使用易盟</text>
        </view>
        <view class="mb-32rpx text-#727687 text-28rpx fw-400">
          <text>为了更好的向您提供服务，我们制定了</text>
          <text class="text-#248cef text-28rpx fw-500" @click.stop="openProtocol(1)">《易盟用户协议》</text>和<text
            class="text-#248cef text-28rpx fw-500"
            @click.stop="openProtocol(2)"
            >《易盟隐私协议》</text
          >
          ，以收集您的设备标识、操作日志等信息用于分析、优化应用性能。 请您务必阅读、充分理解“易盟服务协议”和“易盟隐私政策”各条款了解详细信息。
        </view>
        <view class="text-#727687 text-28rpx fw-400">
          <text> 如您同意，请点击下方按钮开始接受我们的服务。 </text>
        </view>

        <view class="flex justify-center items-center flex-col">
          <mt-button :shake="false" class="mt-72rpx w-100% mb-40rpx" @click="handleAgree">同意</mt-button>
          <text class="text-#727687 text-28rpx fw-400" @click="handleCancel">暂不同意</text>
        </view>

        <!-- <view>请先阅读并同意<text class="text-#6294f1" @click.stop="openProtocol">《易盟用户注册协议》</text></view> -->
      </view>
    </mt-modal>
  </view>
</template>

<script setup>
const emits = defineEmits(['update:modelValue', 'confirm']);

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
});

const loginType = ref();

const mtModalRef = ref(null);

const handleChange = (val) => {
  emits('update:modelValue', val);
};

// 阅读协议
const openProtocol = (type) => {
  // #ifdef APP
  if (type === 1) {
    plus.runtime.openURL('https://iyimeng.com/user/user.html');
  } else {
    plus.runtime.openURL('https://iyimeng.com/user/privacy.html');
  }
  // #endif
};

const openTips = (type) => {
  loginType.value = type;
  const options = {
    showTitle: false,
    cancelText: '我再想想',
    confirmText: '同意',
    slot: true,
    showFooter: false,
    success: (e) => {
      if (e.confirm) {
        emits('update:modelValue', ['agreement']);
        emits('confirm', type);
      }
    }
  };
  mtModalRef.value.open(options);
};

// 同意
const handleAgree = () => {
  emits('update:modelValue', ['agreement']);
  emits('confirm', loginType.value);
  mtModalRef.value.close();
};

// 暂不同意
const handleCancel = () => {
  mtModalRef.value.close();
};

defineExpose({
  openTips
});
</script>

<style lang="scss" scoped>
:deep(.uv-checkbox__icon-wrap--square) {
  border-radius: 50%;
}
:deep(.mt-modal-concise_content) {
  width: 92% !important;
}
</style>
